<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路由3</title>
</head>
<body>
<div id="app">
    <router-link to="/human">human</router-link>
    <router-view></router-view>
</div>

<template id="humanTem">
    <div>
        <h3>humanCom</h3>
        <router-link to="/human/man">man</router-link>
        <router-link to="/human/woman">woman</router-link>
        <router-view></router-view>
    </div>

</template>

<template id="manTem">
    <div>
        <h3>manCom</h3>
        <router-link to="/human/man/adultMan">adultMan</router-link>
        <router-link to="/human/man/immutureMan">immutureMan</router-link>
        <router-view></router-view>
    </div>

</template>


<template id="womanTem">
    <div>
        <h3>womanCom</h3>

    </div>

</template>
<template id="immutureManTem">
    <div>
        <h3>immutureManCom</h3>
        <router-link to="/human/man/immutureMan/teenMan">teenMan</router-link>
        <router-view></router-view>
    </div>

</template>

<template id="teenManTem">
    <div>
        <h3>TeenManCom</h3>

    </div>

</template>

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    let humanCom = {
        template: `#humanTem`
    }
    let manCom = {
        template: `#manTem`
    }

    let womanCom = {
        template: `#womanTem`
    }

    let adultManCom = {
        template: `#adultManTem`
    }
    let immutureManCom = {
        template: `#immutureManTem`
    }
    let teenManCom = {
        template: `#teenManTem`
    }
    //如果不嵌套 则各个组件都会在根router-view中展现
    const router = new VueRouter({
        routes: [{
            path: `/human`,
            component: humanCom,
            children: [{
                path: `/human/man`,
                component: manCom,
                children: [{
                    path: `/human/man/adultMan`,
                    component: adultManCom
                },
                    {
                        path: `/human/man/immutureMan`,
                        component: immutureManCom,
                        children: [{
                            path: `/human/man/immutureMan/teenMan`,
                            component: teenManCom
                        }]
                    }
                ]
            },
                {
                    path: `/human/woman`,
                    component: womanCom
                }
            ]
        }]
    })


    const APP = new Vue({
        el: `#app`,
        router
    })
</script>
</body>
</html>
